<template>
  <div class="navviews" :style="{ background: globalsd === 0 ? '#000' : '#fff' }">
    <div class="logosbox">
      <!-- <img src="../assets/logo.png" alt="">-->
      <!-- 导航图标 -->
      <!--  -->

      <img :src="this.$store.state.scrollist == 0 ? this.imgnav : this.imgdf" />
    </div>
    <!-- 导航内容 -->
    <div class="naxbox">
      <!-- <p>{{ item.words }}</p> -->
      <!-- {{ this.navLists }} -->
      <ul>
        <li v-for="(item, index) in this.navLists" :key="index">
          <!--   <span > </span>-->
          <router-link :to="item.isfasle === true & item.titlelist.length != 0 ? false : item.adds"
            :class="this.$store.state.scrollist === 0 ? 'naacfg' : 'navlistcss'" @mouseenter="titlelist(item)"
            @mouseleave="titlelist(item)">
            {{ item.words }}
          </router-link>
          <!--     <Transition>  </Transition>  <Transition> </Transition>-->

          <div v-show="item.isfasle === true & item.titlelist.length != 0 ? true : false" class="arrowboxdis">
          </div>
          <!-- 显示不显示 -->
          <div v-show="item.isfasle === true & item.titlelist.length != 0 ? true : false" class="disbox"
            @mouseenter="titlecon()" @mouseleave="titlecon()">
            <div v-for="(itesd, indexs) in item.titlelist" :key="indexs">
              <div class="disssbox">
                <h3 :style='{ color: itesd.color }'>{{ itesd.titles }}</h3>
                <!---->
                <span>{{ itesd.ff }}</span>
                <p>{{ itesd.cisi }}</p>
                <img src="../assets/logo.png" alt="">
              </div>
              <!--  titles: "sdsd", ff: "hjddhsh", isjd: '../assets/logo.png', color: "black"-->
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 导航第三部分 -->
    <div class="boxthreen">
      <img alt="Vue logo" src="../assets/logo.png" />
      <!-- -->
      <p :class="globalsd === 0 ? 'naacfg' : 'navlistcss'">我的</p>
    </div>
  </div>
</template>
<script>
//import { inject } from "vue"
export default {
  name: "NavView",
  props: {
    navList: Array
  },

  inject: {
    skak: {
      default: Number
    }
  },
  data() {
    return {
      imgnav: require("../assets/logo.png"),
      imgdf: require("../assets/logo2block.png"),
      glisidata: this.$store.state.scrollist,
      //
      navLists: this.navList,
      scrollistnav: false
    }
  },
  // updated() {
  //   this.glisidata = this.$store.state.scrollist
  //   console.log(this.glisidata);
  // },
  computed: {
    globalsd() {
      return this.$store.state.scrollist


    }
  },
  methods: {
    minsdbox(ixd) {
      this.scrollistnav = !ixd
    },
    titlelist(item) {
      item.isfasle = !item.isfasle

      console.log(item.isfasle)
    },
    titlecon() {
      this.isfasle = !this.isfasles
      console.log(this.isfasles)
    }
  },
  mounted() {
    this.navLists.map((item) => {

      console.log(item.isfasle)
      item.isfasle = false

    })

  },

}

</script>
<style lang="css" scoped>
.navviews {
  width: 100%;
  height: 70px;
  /* background: blue; */
  background: black;
  display: flex;

  align-items: center;
  position: fixed;
  top: 0;
}

.logosbox {
  width: 205px;
  height: 70px;

}

.logosbox img {
  width: 50px;
  height: 56px;
  padding-top: 8px;
}

.naxbox {
  width: 905px;
  height: 70px;
}

.naxbox ul {
  display: flex;
  justify-content: flex-start;
  margin: 0px 16px 0px 16px;
}

.naxbox ul li {
  width: 200px;
  height: 70px;
  line-height: 70px;
  list-style: none;

}

.naxbox ul li a {
  text-decoration-line: none;

  font-size: 20px;
  font-weight: 290;
  font-family: Arial, Helvetica, sans-serif;
}

.navlistcss {
  color: black !important;
}


.naacfg {
  color: white !important;
}

.naacfg:hover,
.navlistcss:hover {
  color: blue !important;
}

.boxthreen {

  display: flex;
  justify-content: center;
  align-items: center;
}

.boxthreen img {
  width: 20px;
  height: 20px;

}

.boxthreen p {
  width: 48px;
  font-size: 17px;
  color: aqua;
  margin-top: 14px;
  color: black;
}

.disbox {
  display: flex;
  transition: 2s;
  width: 972px;
  /* height: 340px; */
  background: white;
  position: absolute;
  left: 20%;
  top: 68px;
  z-index: 2;

}

.arrowboxdis {
  /* display: block;
  position: relative;
  width: 25px;
  height: 20px;
  border-top: transparent;
  border-left: 15px;
  border-right: 15px;
  border-bottom: 25px;
  background: red;
  z-index: 2; */

  width: 0;
  height: 0;

  /* border-top: 0px solid transparent; */
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 22px solid white;
  position: relative;
  left: 43px;
  z-index: 5;
  top: -23px;
  transition: 0.7s ease-in-out;
}

.arrowboxnoe {
  display: none;
  position: relative;
  z-index: 2;
}

.disssbox p {

  color: black;
}
</style>